<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>系统管理</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="normal-list-page-hd clearfix">
                        <Button type="ghost" size="large" icon="trash-b" @click="batchDel">删除</Button>
                        <Button type="primary" size="large" icon="plus-circled" @click="showCreateModal" class="fr">新建</Button>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.pageNum" @on-change="changePage" @on-page-size-change="onPageSizeChange" show-sizer></Page>
                    </div>
                </div>

                <!--新建&修改-->
                <Modal v-model="modal.tDbServers.isShow" :loading="modal.tDbServers.loading" :mask-closable="false" :title="modal.tDbServers.title" @on-ok="postData">
                    <Form ref="systemFrom" :model="modal.tDbServers.formData" :rules="modal.tDbServers.rules" :label-width="120">
                        <FormItem label="服务器名称"  prop="cName">
                            <Input placeholder="请输入服务器名称" v-model="modal.tDbServers.formData.cName" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="数据库地址"  prop="cUrl">
                            <Input placeholder="请输入数据库地址" v-model="modal.tDbServers.formData.cUrl" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="数据库用户名"  prop="cUser">
                            <Input placeholder="请输入数据库用户名" v-model="modal.tDbServers.formData.cUser" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="密码"  prop="cPwd">
                            <Input placeholder="请输入密码" v-model="modal.tDbServers.formData.cPwd" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="备注"  prop="cInfo">
                            <Input placeholder="请输入备注" v-model="modal.tDbServers.formData.cInfo" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="日期"  prop="dCreatetime">
                            <Input placeholder="请输入日期" v-model="modal.tDbServers.formData.dCreatetime" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="连接对应缓存服务器IP"  prop="cRedisip">
                            <Input placeholder="请输入连接对应缓存服务器IP" v-model="modal.tDbServers.formData.cRedisip" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="redis密码"  prop="cRedispwd">
                            <Input placeholder="请输入redis密码" v-model="modal.tDbServers.formData.cRedispwd" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="服务器代码"  prop="cServerid">
                            <Input placeholder="请输入服务器代码" v-model="modal.tDbServers.formData.cServerid" style="width:300px;"/>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
import TDbServersApi from '@/api/tDbServers.js'
import moment from 'moment'
import { Message } from 'iview'

export default {
  name: 'tDbServers',
  data () {
    return {
      // 弹出层数据
      modal: {
        tDbServers: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          // rules: {
          //     name: [
          //         {
          //             required: true,
          //             message: "请填写系统名称",
          //             trigger: "blur"
          //         }
          //     ],
          //     url: [
          //         {
          //             required: true,
          //             message: "请填写URL",
          //             trigger: "blur"
          //         }
          //     ]
          // },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          /** 开始自动生成 */
          {
            title: '',
            key: 'iId'
          },
          {
            title: '服务器名称',
            key: 'cName'
          },
          {
            title: '数据库地址',
            key: 'cUrl'
          },
          {
            title: '数据库用户名',
            key: 'cUser'
          },
          {
            title: '密码',
            key: 'cPwd'
          },
          {
            title: '备注',
            key: 'cInfo'
          },
          {
            title: '日期',
            key: 'dCreatetime'
          },
          {
            title: '连接对应缓存服务器IP',
            key: 'cRedisip'
          },
          {
            title: 'redis密码',
            key: 'cRedispwd'
          },
          {
            title: '服务器代码',
            key: 'cServerid'
          },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            width: 130,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h('Button', {
                  props: {
                    type: 'ghost',
                    size: 'small'
                  },
                  class: 'mr-20',
                  on: {
                    click: () => {
                      // this.showUpdateModal(params.index);
                      this.showUpdateModal(params.row.iId)
                    }
                  }
                },
                [h('Icon', { props: { type: 'edit', size: 14 } })]
                ),

                h('Button', {
                  props: {
                    type: 'ghost',
                    size: 'small'
                  },
                  class: '',
                  on: {
                    click: () => {
                      this.delData([params.row.iId])
                    }
                  }
                },
                [h('Icon', { props: { type: 'trash-a', size: 14 } })]
                )])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      TDbServersApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.page
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },

    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate(valid => {
        if (valid) {
          if (!that.modal.tDbServers.formData.iId) { // 新建
            TDbServersApi.add(that.modal.tDbServers.formData)
              .then(res => {
                that.modal.tDbServers.isShow = false
                that.modal.tDbServers.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          } else { // 修改
            TDbServersApi.update(
              that.modal.tDbServers.formData.iId,
              that.modal.tDbServers.formData
            )
              .then(res => {
                that.modal.tDbServers.isShow = false
                that.modal.tDbServers.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          }
        } else {
          that.modal.tDbServers.loading = false
          that.$nextTick(() => {
            that.modal.tDbServers.loading = true
          })
        }
      })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
                    '<p>您确认删除id为 <strong>' +
                    ids.toString() +
                    '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          TDbServersApi.del({
            ids: ids
          }).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach(element => {
        ids.push(element.iId)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },

    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal () {
      this.modal.tDbServers.type = 'create'
      this.modal.tDbServers.title = '新建'
      this.modal.tDbServers.formData = {}
      this.modal.tDbServers.isShow = true
    },

    // 显示修改弹窗
    showUpdateModal (id) {
      this.modal.tDbServers.type = 'update'
      this.modal.tDbServers.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.tDbServers.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      const that = this
      TDbServersApi.getDetail(id).then(res => {
        that.modal.tDbServers.formData = res.data
      })
        .catch(error => {
          Message.error(error)
        })
      this.modal.tDbServers.isShow = true
    }
  },

  created () {
    // console.log(process.env.const.TEST_API);
    this.getTableData()
  }
}
</script>
